<style lang="less">
  .item1{
    height: 42px;
    line-height: 40px;
  }
  .row-left{
    text-align: center;
  }
  .title-top{
    margin-bottom:10px;
    color: #1C86EE;
    font-size: 1rem;
    border-bottom: 1px solid orangered;
    font-size: 20px;
    color: coral;
  }
  .navi-title {
    height:30px;
    background-color:#f8f8f9;
    line-height:30px;
    padding-left: 15px;
    color: #5CACEE;
    font-size: 0.7rem;
    font-weight: bold;
  }
  .content{
    background-color:white;
    height: auto;
    border: 1px solid lightgray;
    padding: 0px;
  }
  .idCard{
    width: 170px;
    height: 80px;
    background-color: #79e428;
    position: absolute;
    right: 2%;
    top: 13%;
    color: white;
    font-size: 1.5rem;
    line-height: 80px;
    text-align: center;
  }
  .red-name{
    color: red
  }
  .ivu-steps-item {
    display: initial;
    position: relative;
    vertical-align: initial;
  }
  .step-item {
    float: left;
    margin-left: 0px;
  }
</style>
<template>
  <div style="background-color:white">
    <div style="">
      <Row class="title-top">
        <Col span="4" style="text-align: left;width:22%">城市低保救助申请登记</Col>
      </Row>
    </div>
    <div style="height:30px;">
      <Steps :current="7" size="small">
        <div @click="nextStep('0')" class="step-item">
          <Step title="家庭信息" content=""></Step>
        </div>
        <div @click="nextStep('1')" class="step-item">
          <Step title="家庭成员" content=""></Step>
        </div>
        <div @click="nextStep('2')" class="step-item">
          <Step title="基础收入" content=""></Step>
        </div>
        <div @click="nextStep('3')" class="step-item">
          <Step title="基础支出" content=""></Step>
        </div>
        <div @click="nextStep('4')" class="step-item">
          <Step title="赡抚扶养" content=""></Step>
        </div>
        <div @click="nextStep('5')" class="step-item">
          <Step title="基础财产" content=""></Step>
        </div>
        <div @click="nextStep('6')" class="step-item">
          <Step title="财产房产" content=""></Step>
        </div>
        <div @click="nextStep('7')" class="step-item">
          <Step title="工作单位" content=""></Step>
        </div>
        <div @click="nextStep('8')" class="step-item">
          <Step title="教育情况" content=""></Step>
        </div>
        <div @click="nextStep('9')" class="step-item">
          <Step title="家庭附件" content=""></Step>
        </div>
        <div @click="nextStep('10')" class="step-item">
          <Step title="提交信息" content=""></Step>
        </div>
      </Steps>
    </div>
    <div class="content">
      <div class="navi-title">
        工作单位信息
      </div>
      <div style="height:30px;margin-top:3px">
        <Button type="info" class="step-item" style="margin-left:5px" size="small" @click="entry()">录入</Button>
        <Modal v-model="modal" title="录入工作单位" width="900" style="position:relative;">
          <Form ref="paramData" :model="paramData">
            <Row class="item1">
              <Col span="5" style="text-align: center" class="red-name">人员姓名:</Col>
              <Col span="6">
                <Select v-model="paramData.ssbf0001">
                  <Option :value="obj.ss11002Id" v-for="obj in data4.personTypeDict" v-bind:key="obj.ss11002Id">{{obj.azcp0003}}</Option>
                </Select>
              </Col>
              <Col span="5" style="text-align: center" class="">组织机构代码:</Col>
              <Col span="6">
                <Input v-model="paramData.ssbf0002" placeholder=""></Input>
              </Col>
            </Row>
            <Row class="item1">
              <Col span="5" style="text-align: center" class="red-name">单位名称:</Col>
              <Col span="6">
                <Input v-model="paramData.ssbf0003" placeholder=""></Input>
              </Col>
              <Col span="5" style="text-align: center" class="">单位性质:</Col>
              <Col span="6">
                <Select v-model="paramData.ssbf0004">
                  <Option :value="obj.key" v-for="obj in data2.CompanyNatureDict" v-bind:key="obj.key">{{obj.value}}</Option>
                </Select>
              </Col>
            </Row>
            <Row class="item1">
              <Col span="5" style="text-align: center" class="">单位隶属:</Col>
              <Col span="6">
                <Select v-model="paramData.ssbf0005">
                  <Option :value="obj.key" v-for="obj in data2.CompanyAffiliationDict" v-bind:key="obj.key">{{obj.value}}</Option>
                </Select>
              </Col>
              <Col span="5" style="text-align: center" class="red-name">单位地址:</Col>
              <Col span="6">
                <Input v-model="paramData.ssbf0006" placeholder=""></Input>
              </Col>
            </Row>
            <Row class="item1">
              <Col span="5" style="text-align: center" class="">联系电话:</Col>
              <Col span="6">
                <Input v-model="paramData.ssbf0007" placeholder=""></Input>
              </Col>
              <Col span="5" style="text-align: center" class="">入职时间:</Col>
              <Col span="6">
                <DatePicker type="date" v-model="paramData.ssbf0008" placeholder="选择入职时间" style="width: 217px"></DatePicker>
              </Col>
            </Row>
            <Row class="item1">
              <Col span="5" style="text-align: center" class="">离职时间:</Col>
              <Col span="6">
                <DatePicker type="date" v-model="paramData.ssbf0009" placeholder="选择离职时间" style="width: 217px"></DatePicker>
              </Col>
              <Col span="5" style="text-align: center" class="">所在部门:</Col>
              <Col span="6">
                <Input v-model="paramData.ssbf0010" placeholder=""></Input>
              </Col>
            </Row>
            <Row class="item1">
              <Col span="5" style="text-align: center" class="">职业:</Col>
              <Col span="6">
                <Input v-model="paramData.ssbf0011" placeholder=""></Input>
              </Col>
              <Col span="5" style="text-align: center" class="">岗位:</Col>
              <Col span="6">
                <Input v-model="paramData.ssbf0012" placeholder=""></Input>
              </Col>
            </Row>
            <Row class="item1">
              <Col span="5" style="text-align: center" class="">工龄:</Col>
              <Col span="6">
                <Input v-model="paramData.ssbf0013" placeholder=""></Input>
              </Col>
              <Col span="5" style="text-align: center" class="">薪水:</Col>
              <Col span="6">
                <Input v-model="paramData.ssbf0014" placeholder=""></Input>
              </Col>
            </Row>
            <Row class="item1">
              <Col span="5" style="text-align: center" class="">描述:</Col>
              <Col span="6">
                <Input v-model="paramData.ssbf0015" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
              </Col>
            </Row>
          </Form>
          <div slot="footer">
            <Button type="text" size="large" @click="modal = false">取消</Button>
            <Button type="primary" size="large" :disabled="order_state == '1' || order_state == '2' || order_state == '3'" @click="ok111(paramData)">确定</Button>
          </div>
        </Modal>
        <!-- <Button type="info" class="step-itemoption" style="margin-left:5px">查看</Button> -->
      </div>
      <div>
        <Table :columns="columns1" :data="data3">
          <template slot-scope="{ row, index, column }" slot="action">
              <Button type="info" size="small"  @click="edit(index)" style="margin-right:5px">编辑</Button>
              <Button type="error" size="small" :disabled="order_state == '1' || order_state == '2' || order_state == '3'"  @click="deletePeople(index)">删除</Button>
          </template>
        </Table>
        <div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
            <Page :total="data3.length" :current="1" @on-change="changePage"></Page>
        </div>
    </div>
      </div>
    </div>
    <div style="height:40px;line-height:40px;float:left;margin-top:10px;margin-left:40%">
      <Button type="info" :disabled="order_state == '1' || order_state == '2' || order_state == '3'" @click="next()" style="margin-right:5px">下一步></Button>
      <Button type="info" @click="nextPage()" v-if="order_state == '1' || order_state == '2' || order_state == '3'">下一页></Button>
    </div>
  </div>
</template>
<script>
import { getCityDBAppraising } from '@/api/subsistenceAlowances'
import { date2str, iteminf, updateOrder } from '@/api/eventlist'
export default {
  data () {
    return {
      family_url: '',
      support_id: '',
      family_idInfo: {},
      next_params: {},
      itemid: this.$route.params.itemid || '',
      work_url: '',
      info_url: '',
      add_url: '',
      update_url: '',
      delete_url: '',
      see: this.$route.params.see || false,
      code: this.$route.params.code,
      url: 'dbsq/addCompanyInfo',
      str: this.$route.params.serialNumber,
      idcardNumber: this.$route.params.idcardNumber,
      ss11001Id: this.$route.params.ss11001Id,
      ss11002Id: this.$route.params.ss11002Id,
      errorTitle: '保存错误',
      columns1: [
        {
          title: '人员姓名',
          align: 'center',
          key: 'ssbf0001'
        },
        {
          title: '组织机构代码',
          align: 'center',
          key: 'ssbf0002'
        },
        {
          title: '单位名称 ',
          align: 'center',
          key: 'ssbf0003'
        },
        {
          title: '单位性质',
          align: 'center',
          key: 'ssbf0004'
        },
        {
          title: '单位地址',
          align: 'center',
          key: 'ssbf0006'
        },
        {
          title: '联系电话',
          align: 'center',
          key: 'ssbf0007'
        },
        {
          title: '所在部门',
          align: 'center',
          key: 'ssbf0010'
        },
        {
          title: '职业',
          align: 'center',
          key: 'ssbf0011'
        },
        {
          title: '岗位',
          align: 'center',
          key: 'ssbf0012'
        },
        {
          title: '操作',
          align: 'center',
          slot: 'action',
          width: '200px'
        }
      ],
      paramData: {
        ssbf0001: '',
        ssbf0002: '',
        ssbf0003: '',
        ssbf0004: '',
        ssbf0005: '',
        ssbf0006: '',
        ssbf0007: '',
        ssbf0008: '',
        ssbf0009: '',
        ssbf0010: '',
        ssbf0011: '',
        ssbf0012: '',
        ssbf0013: '',
        ssbf0014: '',
        ssbf0015: '',
        ss11008Id: ''
      },
      data1: [],
      data2: [],
      data3: [],
      data4: [],
      dataF1: [],
      modal: false,
      order_state: this.$route.params.order_state,
      form_params: {
        ss11001Data: {},
        ss11002Data: [],
        ss11003Data: [],
        ss11004Data: [],
        ss11005Data: [],
        ss11006Data: [],
        ss11007Data: [],
        ss11008Data: [],
        ss11009Data: [],
        ss11010Data: [],
        ss11012Data: [],
        ss12001Data: {}
      },
      workunit_arr: []
    }
  },
  methods: {
    nextStep (step) {
      if (step === '0') {
        this.$router.push({
          name: 'db_subsistenceapplication',
          params: this.next_params
        })
      } else if (step === '1') {
        this.$router.push({
          name: 'db_subsistenceapplication1',
          params: this.next_params
        })
      } else if (step === '2') {
        this.$router.push({
          name: 'db_subsistenceapplication2',
          params: this.next_params
        })
      } else if (step === '3') {
        this.$router.push({
          name: 'db_expenditurelist',
          params: this.next_params
        })
      } else if (step === '4') {
        this.$router.push({
          name: 'db_supportlist',
          params: this.next_params
        })
      } else if (step === '5') {
        this.$router.push({
          name: 'db_basicproperty',
          params: this.next_params
        })
      } else if (step === '6') {
        this.$router.push({
          name: 'db_houseproperty',
          params: this.next_params
        })
      } else if (step === '8') {
        this.$router.push({
          name: 'db_educationinfo',
          params: this.next_params
        })
      } else if (step === '9') {
        this.$router.push({
          name: 'db_nearfamily',
          params: this.next_params
        })
      }
    },
    nextPage () {
      this.$router.push({
        name: 'db_educationinfo',
        params: this.next_params
      })
    },
    getInfo (index, type) {
      var param = {
        'idcardNumber': this.idcardNumber,
        'dictsCode': 'ss11008',
        'serialNumber': this.str
      }
      getCityDBAppraising(param).then(res => {
        this.data2 = res.data.data.data
        if (type) {
          for (var i = 0; i < this.data2.CompanyNatureDict.length; i++) {
            if (type === this.data2.CompanyNatureDict[i].key) {
              this.data3[index].ssbf0004 = this.data2.CompanyNatureDict[i].value
            }
          }
        }
      })
    },
    ok111 (item1) {
      let param = {}
      this.paramData.ssbf0009 = date2str(this.paramData.ssbf0009)
      this.paramData.ssbf0008 = date2str(this.paramData.ssbf0008)
      if (this.paramData.ssbf0001 === '' || this.paramData.ssbf0001 === undefined) {
        const content = '<p>请选择人员</p>'
        this.$Modal.error({
          title: this.errorTitle,
          content: content
        })
        return
      }
      if (this.paramData.ssbf0003 === '' || this.paramData.ssbf0003 === undefined) {
        const content = '<p>请填写单位名称</p>'
        this.$Modal.error({
          title: this.errorTitle,
          content: content
        })
        return
      }
      if (this.paramData.ssbf0006 === '' || this.paramData.ssbf0006 === undefined) {
        const content = '<p>请填写单位地址</p>'
        this.$Modal.error({
          title: this.errorTitle,
          content: content
        })
        return
      }
      if (this.id !== '') { // 编辑
        this.workunit_arr[this.id] = this.paramData
        this.workunit_arr[this.id].ss11007Id = this.$route.params.uuid
      } else {
        this.workunit_arr.push(this.paramData)
      }
      this.data3 = JSON.parse(JSON.stringify(this.workunit_arr))
      this.form_params.ss11008Data = this.workunit_arr
      param = {
        item_id: this.$route.params.itemid,
        cardno: this.$route.params.cardno,
        form_params: this.form_params,
        code: this.$route.params.code
      }
      updateOrder(param).then(res => {
        if (res.data.errcode === 0) {
          this.$Message.success(res.data.errmsg)
          for (var i = 0; i < this.data3.length; i++) {
            for (var j = 0; j < this.data4.personTypeDict.length; j++) {
              if (this.data3[i].ssbf0001 === this.data4.personTypeDict[j].ss11002Id) {
                this.data3[i].ssbf0001 = this.data4.personTypeDict[j].azcp0003
              }
            }
            // this.data3[i].ssbb0002 = '个人'
            this.getInfo(i, this.data3[i].ssbf0004)
          }
          this.modal = false
        } else {
          const content = '<p>' + res.data.errmsg + '</p>'
          this.$Modal.error({
            title: this.errorTitle,
            content: content
          })
        }
      })
    },
    edit (item1) {
      this.modal = true
      this.paramData = this.workunit_arr[item1]
      this.id = item1
    },
    deletePeople (item1) {
      if (confirm('确定删除吗')) {
        this.data3.splice(item1, 1)
        this.workunit_arr.splice(item1, 1)
        this.form_params.ss11008Data = JSON.parse(JSON.stringify(this.workunit_arr))
        var param = {
          item_id: this.$route.params.itemid,
          cardno: this.$route.params.cardno,
          form_params: this.form_params,
          code: this.$route.params.code
        }
        updateOrder(param).then(res => {
          if (res.data.errcode === 0) {
            this.$Message.success(res.data.errmsg)
            for (var i = 0; i < this.data3.length; i++) {
              for (var j = 0; j < this.data4.personTypeDict.length; j++) {
                if (this.data3[i].ssbf0001 === this.data4.personTypeDict[j].ss11002Id) {
                  this.data3[i].ssbf0001 = this.data4.personTypeDict[j].azcp0003
                }
              }
              // this.data3[i].ssbb0002 = '个人'
              this.getInfo(i, this.data3[i].ssbf0004)
            }
            this.modal = false
          } else {
            const content = '<p>' + res.data.errmsg + '</p>'
            this.$Modal.error({
              title: this.errorTitle,
              content: content
            })
          }
        })
      }
    },
    next () {
      console.log('下一步是工作单位')
      this.$router.push({
        name: 'db_educationinfo',
        params: this.next_params
      })
    },
    changePage () {
      // The simulated data is changed directly here, and the actual usage scenario should fetch the data from the server
      this.data3 = this.getWorkUnitList()
    },
    entry () { // 录入
      this.paramData = {}
      this.paramData.ss11008Id = this.$route.params.uuid
      this.id = ''
      this.modal = true
    }
  },
  mounted () {
    let param2 = {
      'cardno': this.$route.params.cardno,
      'id': this.$route.params.itemid,
      'code': this.$route.params.code,
      'params': '1'
    }
    iteminf(param2).then(res => {
      if (res.data.data) {
        if (JSON.parse(res.data.data.form_params).ss11001Data) {
          this.form_params.ss11001Data = JSON.parse(res.data.data.form_params).ss11001Data
        }
        if ((JSON.parse(res.data.data.form_params)).ss11002Data) {
          this.form_params.ss11002Data = JSON.parse(res.data.data.form_params).ss11002Data
          this.data4.personTypeDict = this.form_params.ss11002Data
        }
        if (JSON.parse(res.data.data.form_params).ss11003Data) {
          this.form_params.ss11003Data = JSON.parse(res.data.data.form_params).ss11003Data
        }
        if (JSON.parse(res.data.data.form_params).ss11004Data) {
          this.form_params.ss11004Data = JSON.parse(res.data.data.form_params).ss11004Data
        }
        if (JSON.parse(res.data.data.form_params).ss11005Data) {
          this.form_params.ss11005Data = JSON.parse(res.data.data.form_params).ss11005Data
        }
        if (JSON.parse(res.data.data.form_params).ss11006Data) {
          this.form_params.ss11006Data = JSON.parse(res.data.data.form_params).ss11006Data
        }
        if (JSON.parse(res.data.data.form_params).ss11007Data) {
          this.form_params.ss11007Data = JSON.parse(res.data.data.form_params).ss11007Data
        }
        if (JSON.parse(res.data.data.form_params).ss11008Data) {
          this.form_params.ss11008Data = JSON.parse(res.data.data.form_params).ss11008Data
          this.workunit_arr = JSON.parse(JSON.stringify(this.form_params.ss11008Data))
          this.data3 = JSON.parse(JSON.stringify(this.form_params.ss11008Data))
          for (var i = 0; i < this.data3.length; i++) {
            for (var j = 0; j < this.data4.personTypeDict.length; j++) {
              if (this.data3[i].ssbf0001 === this.data4.personTypeDict[j].ss11002Id) {
                this.data3[i].ssbf0001 = this.data4.personTypeDict[j].azcp0003
              }
            }
            // this.data3[i].ssbb0002 = '个人'
            this.getInfo(i, this.data3[i].ssbf0004)
          }
        }
        if (JSON.parse(res.data.data.form_params).ss11009Data) {
          this.form_params.ss11009Data = JSON.parse(res.data.data.form_params).ss11009Data
        }
        if (JSON.parse(res.data.data.form_params).ss11010Data) {
          this.form_params.ss11010Data = JSON.parse(res.data.data.form_params).ss11010Data
        }
        if (JSON.parse(res.data.data.form_params).ss11012Data) {
          this.form_params.ss11012Data = JSON.parse(res.data.data.form_params).ss11012Data
        }
        if (JSON.parse(res.data.data.form_params).ss12001Data) {
          this.form_params.ss12001Data = JSON.parse(res.data.data.form_params).ss12001Data
        }
      }
    })
    this.next_params = {
      serialNumber: this.$route.params.serialNumber,
      idcardNumber: this.$route.params.idcardNumber,
      code: this.$route.params.code,
      cardno: this.$route.params.cardno,
      itemid: this.itemid,
      order_state: this.order_state,
      uuid: this.$route.params.uuid
    }
    this.getInfo()
  }
}
</script>
